/**
 * 书架页面展示逻辑
 */

let allBookshelfNovels = []; // 用于存储所有已加载的小说数据

// 页面加载完成后执行
$(document).ready(function() {
    // 获取当前用户的书架数据
    loadUserBookshelf();
    
    // 绑定事件处理
    bindEvents();
});

/**
 * 加载用户书架数据
 */
function loadUserBookshelf() {
    // 显示加载中状态
    showLoading();
    
    // 发送AJAX请求获取用户书架数据
    $.ajax({
        url: '/demo1_war_exploded/API/Bookshelf/list',
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            // 隐藏加载状态
            hideLoading();
            
            console.log('API响应数据:', response); // 添加日志查看返回数据
            
            if (response.code === 200) {
                allBookshelfNovels = response.rows || []; // 存储获取到的小说数据
                renderBookshelf(allBookshelfNovels);
            } else {
                // 显示错误信息
                showError(response.msg || '加载书架失败');
                allBookshelfNovels = []; // 清空数据以防出错
                renderBookshelf(allBookshelfNovels); // 即使失败也尝试渲染空书架
            }
        },
        error: function(xhr, status, error) {
            // 隐藏加载状态
            hideLoading();
            
            console.error('API错误:', xhr.responseText); // 添加详细错误日志
            
            // 显示错误信息
            showError('网络错误，请稍后重试');
            allBookshelfNovels = []; // 清空数据
            renderBookshelf(allBookshelfNovels); // 即使失败也尝试渲染空书架
        }
    });
}

/**
 * 渲染书架内容
 * @param {Array} novels 小说数据数组
 */
function renderBookshelf(novels) {
    // 清空容器
    $('#novels-container').empty();
    
    // 如果没有小说数据，显示空书架提示
    if (!novels || novels.length === 0) {
        $('#empty-bookshelf').show();
        return;
    }
    
    // 隐藏空书架提示
    $('#empty-bookshelf').hide();
    
    // 检查是否有分组
    // 调整判断逻辑：只要存在一个novel.group_name不为null且不为空字符串，就认为有分组
    const hasActualGroups = novels.some(novel => novel.group_name && novel.group_name.trim() !== '');
    
    if (hasActualGroups) {
        // 按分组渲染
        renderGroupedBookshelf(novels);
    } else {
        // 正常渲染所有小说
        $.each(novels, function(index, novel) {
            // 创建小说卡片
            const novelCard = createNovelCard(novel);
            
            // 添加到容器中
            $('#novels-container').append(novelCard);
        });
    }
}

/**
 * 按分组渲染书架
 * @param {Array} novels 小说数据数组
 */
function renderGroupedBookshelf(novels) {
    // 按分组名称对小说进行分组
    const groups = {};
    const ungroupedNovels = [];
    
    // 将小说按分组归类，group_name为null或空字符串的单独处理
    novels.forEach(novel => {
        if (novel.group_name && novel.group_name.trim() !== '') {
            // 只有group_name有效时才进行分组
            if (!groups[novel.group_name]) {
                groups[novel.group_name] = [];
            }
            groups[novel.group_name].push(novel);
        } else {
            // group_name为null或空字符串的单独收集
            ungroupedNovels.push(novel);
        }
    });
    
    // 遍历分组，为每个分组创建一个卡片
    for (const groupName in groups) {
        const groupNovels = groups[groupName];
        const groupCard = createGroupCard(groupName, groupNovels);
        $('#novels-container').append(groupCard);
    }
    
    // 单独渲染没有分组的小说
    $.each(ungroupedNovels, function(index, novel) {
        const novelCard = createNovelCard(novel);
        $('#novels-container').append(novelCard);
    });
}

/**
 * 创建分组卡片
 * @param {string} groupName 分组名称
 * @param {Array} novels 分组中的小说数组
 * @returns {jQuery} 分组卡片jQuery对象
 */
function createGroupCard(groupName, novels) {
    // 创建一个2x2的网格来显示最多4本书的封面
    let coverGrid = '';
    
    // 最多显示4本书的封面
    const maxCovers = Math.min(novels.length, 4);
    
    // 创建封面网格
    for (let i = 0; i < maxCovers; i++) {
        coverGrid += `
            <div class="col-6 p-1">
                <img src="${novels[i].cover_url || 'https://mysteriouslamb.oss-cn-hangzhou.aliyuncs.com/icon.jpg'}" 
                     alt="${novels[i].novel_name}" 
                     class="img-fluid rounded shadow-sm" 
                     style="width: 100%; height: 80px; object-fit: cover;">
            </div>
        `;
    }
    
    // 创建分组卡片
    const card = $(`
        <div class="col-6 col-sm-4 col-md-3 col-lg-3 mb-4">
            <div class="card group-card h-100 shadow-sm border-0">
                <div class="card-body p-3 d-flex flex-column">
                    <div class="group-covers mb-3">
                        <div class="row">
                            ${coverGrid}
                        </div>
                    </div>
                    <div class="group-info text-center">
                        <h5 class="group-title">${groupName}</h5>
                        <p class="text-muted small mb-1">共${novels.length}本书</p>
                    </div>
                </div>
                <a href="#" class="stretched-link group-link" data-group-name="${groupName}"></a>
            </div>
        </div>
    `);
    
    return card;
}

/**
 * 创建小说卡片
 * @param {Object} novel 小说数据
 * @returns {jQuery} 小说卡片jQuery对象
 */
function createNovelCard(novel) {
    // 处理 viewed_chapters 为 undefined 的情况
    const viewedChapters = novel.viewed_chapters !== undefined ? novel.viewed_chapters : 1;
    // 处理简介为空的情况，添加更友好的提示和样式
    const intro = novel.introduction || '暂无任何简介，快来探索这本神秘小说吧！';
    // 创建小说卡片 - 新的网格布局样式，添加详细信息层
    const card = $(`
        <div class="col-6 col-sm-4 col-md-3 col-lg-3 mb-4">
            <div class="card novel-card h-100 shadow-sm border-0">
                <div class="card-body p-3 d-flex flex-column">
                    <div class="novel-cover mb-3 text-center">
                        <img src="${novel.cover_url || 'https://mysteriouslamb.oss-cn-hangzhou.aliyuncs.com/icon.jpg'}" 
                             alt="${novel.novel_name}" 
                             class="img-fluid rounded shadow-sm" 
                             style="width: 120px; height: 160px; object-fit: cover;">
                    </div>
                    <div class="novel-info text-center">
                        <h6 class="novel-title">${novel.novel_name}</h6>
                        <p class="text-muted small mb-1">${novel.username || '未知作者'}</p>
                        <p class="text-muted small mb-2">${novel.view_chapter_id}/${novel.total_chapters}章</p>
                    </div>
                    
                    <!-- 详细信息层 - 默认隐藏 -->
                    <div class="novel-detail-info position-absolute top-0 start-0 w-100 h-100 bg-white p-3 rounded overflow-auto" style="display: none; z-index: 10;">
                        <h6 class="novel-title">${novel.novel_name}</h6>
                        <p class="text-muted small mb-1">作者：${novel.username || '未知作者'}</p>
                        <p class="text-muted small mb-1">阅读进度：${viewedChapters}/${novel.total_chapters}章</p>
                        <p class="text-muted small mb-1">加入书架：${novel.collect_time ? new Date(novel.collect_time).toLocaleDateString() : '未知'}</p>
                        <p class="text-muted small mb-1">最近更新：${novel.update_time ? new Date(novel.update_time).toLocaleDateString() : '未知'}</p>
                        <p class="text-muted small mb-1">简介：</p>
                        <p class="text-muted small mb-2 novel-intro" style="max-height: 80px; overflow-y: auto; font-style: italic;">${intro}</p>
                    </div>
                </div>
                <a href="#" class="stretched-link novel-detail-link" 
                   data-novel-id="${novel.novel_id}" 
                   data-viewed-chapters="${viewedChapters}"></a>
            </div>
        </div>
    `);
    
    // 移除原有的鼠标悬停事件
    // card.find('.novel-card').hover(
    //     function() {
    //         // 鼠标进入时显示详细信息
    //         $(this).find('.novel-detail-info').fadeIn(200);
    //     },
    //     function() {
    //         // 鼠标离开时隐藏详细信息
    //         $(this).find('.novel-detail-info').fadeOut(200);
    //     }
    // );
    
    return card;
}

/**
 * 绑定事件处理
 */
function bindEvents() {
    // 继续阅读按钮点击事件
    $(document).on('click', '.continue-read', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        const novelId = $(this).data('novel-id');
        const viewedChapters = $(this).data('viewed-chapters') || 1; // 默认第1章
        // 在新窗口中打开阅读页面
        window.open(`/demo1_war_exploded/MainPage/functionPage/reader.jsp?novelId=${novelId}&chapterId=${viewedChapters}`, '_blank');
    });
    
    // 移出书架按钮点击事件
    $(document).on('click', '.remove-from-bookshelf', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        const novelId = $(this).data('novel-id');
        removeFromBookshelf(novelId);
    });
    
    // 小说详情链接点击事件 - 修改为在新窗口中打开 reader.jsp
    $(document).on('click', '.novel-detail-link', function(e) {
        e.preventDefault();
        
        const novelId = $(this).data('novel-id');
        const viewedChapters = $(this).data('viewed-chapters') || 1; // 默认第1章
        // 在新窗口中打开阅读页面
        window.open(`/demo1_war_exploded/MainPage/functionPage/reader.jsp?novelId=${novelId}&chapterId=${viewedChapters}`, '_blank');
    });
    
    // 分组链接点击事件
    $(document).on('click', '.group-link', function(e) {
        e.preventDefault();
        
        const groupName = $(this).data('group-name');
        // 修改为调用显示模态框的函数
        showGroupModal(groupName);
    });
    
    // 创建分组按钮点击事件
    $(document).on('click', '#createGroupBtn', function() {
        showCreateGroupModal();
    });
    
    // 确认创建分组按钮点击事件
    $(document).on('click', '#confirmCreateGroup', function() {
        createGroup();
    });
    
    // 小说选择复选框变化事件
    $(document).on('change', '.novel-checkbox', function() {
        updateCreateGroupButton();
    });
}

/**
 * 显示创建分组模态框
 */
function showCreateGroupModal() {
    // 清空表单
    $('#createGroupForm')[0].reset();
    
    // 加载未分组的小说
    loadUngroupedNovels();
    
    // 显示模态框
    var createGroupModal = new bootstrap.Modal(document.getElementById('createGroupModal'));
    createGroupModal.show();
}

/**
 * 加载未分组的小说
 */
function loadUngroupedNovels() {
    const ungroupedNovels = allBookshelfNovels.filter(novel => 
        !novel.group_name || novel.group_name.trim() === ''
    );
    
    const container = $('#ungroupedNovels');
    container.empty();
    
    if (ungroupedNovels.length === 0) {
        $('#noUngroupedNovels').show();
        container.hide();
        $('#confirmCreateGroup').prop('disabled', true);
        return;
    }
    
    $('#noUngroupedNovels').hide();
    container.show();
    
    // 渲染未分组的小说选择项
    ungroupedNovels.forEach(novel => {
        const novelItem = $(`
            <div class="col">
                <div class="card h-100">
                    <div class="card-body p-2">
                        <div class="form-check">
                            <input class="form-check-input novel-checkbox" type="checkbox" 
                                   value="${novel.novel_id}" id="novel_${novel.novel_id}">
                            <label class="form-check-label d-flex align-items-center" for="novel_${novel.novel_id}">
                                <img src="${novel.cover_url || 'https://mysteriouslamb.oss-cn-hangzhou.aliyuncs.com/icon.jpg'}" 
                                     alt="${novel.novel_name}" class="me-2 rounded" 
                                     style="width: 40px; height: 50px; object-fit: cover;">
                                <div class="flex-grow-1">
                                    <div class="fw-bold text-truncate" style="max-width: 150px;">${novel.novel_name}</div>
                                    <small class="text-muted">${novel.author_name}</small>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        `);
        container.append(novelItem);
    });
    
    // 初始化按钮状态
    updateCreateGroupButton();
}

/**
 * 更新创建分组按钮状态
 */
function updateCreateGroupButton() {
    const selectedNovels = $('.novel-checkbox:checked').length;
    const groupName = $('#groupName').val().trim();
    
    $('#confirmCreateGroup').prop('disabled', selectedNovels === 0 || groupName === '');
}

/**
 * 创建分组
 */
function createGroup() {
    const groupName = $('#groupName').val().trim();
    const selectedNovelIds = $('.novel-checkbox:checked').map(function() {
        return $(this).val();
    }).get();
    
    if (!groupName) {
        showError('请输入分组名称');
        return;
    }
    
    if (selectedNovelIds.length === 0) {
        showError('请至少选择一本小说');
        return;
    }
    
    // 检查分组名称是否已存在
    const existingGroups = allBookshelfNovels
        .filter(novel => novel.group_name && novel.group_name.trim() !== '')
        .map(novel => novel.group_name);
    
    if (existingGroups.includes(groupName)) {
        showError('分组名称已存在，请使用其他名称');
        return;
    }
    
    // 发送创建分组请求
    $.ajax({
        url: '/demo1_war_exploded/API/Bookshelf/createGroup',
        type: 'POST',
        data: {
            groupName: groupName,
            novelIds: selectedNovelIds.join(',')
        },
        dataType: 'json',
        success: function(response) {
            if (response.code === 200) {
                // 关闭模态框
                bootstrap.Modal.getInstance(document.getElementById('createGroupModal')).hide();
                
                // 显示成功提示
                showSuccess('分组创建成功');
                
                // 重新加载书架数据
                loadUserBookshelf();
            } else {
                showError(response.msg || '创建分组失败');
            }
        },
        error: function() {
            showError('网络错误，请稍后重试');
        }
    });
}

/**
 * 显示加载中状态
 */
function showLoading() {
    // 可以添加加载动画
    console.log('加载中...');
}

/**
 * 隐藏加载状态
 */
function hideLoading() {
    // 隐藏加载动画
    console.log('加载完成');
}

/**
 * 显示错误信息
 * @param {string} message 错误信息
 */
function showError(message) {
    console.error('错误信息:', message);
    // 可以使用toast或alert显示错误信息
    alert(message);
}

/**
 * 显示成功信息
 * @param {string} message 成功信息
 */
function showSuccess(message) {
    console.log(message);
    // 可以使用toast显示成功信息
}

/**
 * 显示分组详情模态框
 * @param {string} groupName 分组名称
 */
function showGroupModal(groupName) {
    // 设置模态框标题
    $('#groupDetailModalLabel').text(groupName);
    // 清空之前的内容
    $('#group-novels-container').empty();

    // 从 allBookshelfNovels 中筛选出属于该分组的小说
    const novelsInGroup = allBookshelfNovels.filter(novel => novel.group_name === groupName);

    if (novelsInGroup.length === 0) {
        $('#group-novels-container').html('<p class="text-center">该分组下暂无小说。</p>');
    } else {
        // 渲染分组内的小说
        $.each(novelsInGroup, function(index, novel) {
            const novelCard = createNovelCard(novel); // 复用创建小说卡片的函数
            $('#group-novels-container').append(novelCard);
        });
    }
    
    // 显示模态框
    var groupModal = new bootstrap.Modal(document.getElementById('groupDetailModal'));
    groupModal.show();
}